<template>
  <div>
    <myDivider name="巡查码详情"></myDivider>
    <el-page-header @back="$router.go(-1)"></el-page-header>
    <el-form style="margin-top: 20px;" ref="form" :model="form" label-width="150px">
      <el-form-item label="巡查类别：">
        <span>{{ form.categoryName }}</span>
      </el-form-item>
      <div style="display: flex;">
        <el-form-item label="所属小区：">
          <span>{{ form.residentialInfo }}</span>
        </el-form-item>
        <el-form-item label="扫码权限人：">
          <span>{{ categoryResponsibleNames }}</span>
        </el-form-item>
      </div>
      <el-form-item label="巡查码：">
        <el-image style="width: 150px; height: 150px" :src="form.codeImageUrl" :preview-src-list="[]">
        </el-image>
      </el-form-item>
      <el-form-item label="名称：">
        <el-input disabled style="width: 200px;" v-model="form.codeName"></el-input>
      </el-form-item>
      <el-form-item label="位置：">
        <el-input type="textarea"
        :rows="2" disabled style="width: 250px;" v-model="form.positionName"></el-input>
        <span style="color: #529de6;margin-left: 10px;cursor: pointer;" @click="seeMap(form)">查看地图</span>
      </el-form-item>
      <el-form-item label="位置参照图：">
        <el-image v-if="form.positionUrl" style="width: 100px; height: 100px" :src="form.positionUrl"
          :preview-src-list="[form.positionUrl]">
        </el-image>
        <span v-else>暂无图片</span>
      </el-form-item>
    </el-form>
    <el-dialog title="位置信息" :visible.sync="dialogVisible" width="80%">
      <div class="mapStyle">
        <span
          style="display: block;margin-bottom: 15px;font-size: 20px;font-weight: 600">{{ '选择的位置：' + positionName }}</span>

        <div id="container"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "74a9bc741a93c4984284167952f22f4a",//安全密钥
};
export default {
  data() {
    return {
     
      form: {},
      positionName: '',
      map: null,
      marker: null,
      geocoder: null,//编码
      AMap: null,
      dialogVisible: false,
      categoryResponsibleNames: '',
    }
  },
  async activated() {
    let id = this.$route.query.id
    let res = await this.$api.patrol.myGetCodeDetail(id)
    console.log(res, 'qwdqwdwq');
    if (res.code == 200) {
      this.form = res.data
      this.categoryResponsibleNames = this.form.categoryResponsibleNames.join(',')
    } else {
      this.$message.error(res.message)
    }
  },
  methods: {
    seeMap(item) {
      this.dialogVisible = true
      console.log(item)
      if (!item.longitude) {
        this.$message.error('缺少定位')
        return
      }
      this.positionName = item.positionName
      this.$nextTick(() => {
        AMapLoader.load({
          key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.AMap = AMap

            let mylatlot = [item.longitude,item.latitude]
            this.map = new AMap.Map("container", {
              // viewMode: "3D", // 是否为3D地图模式
              zoom: 15, // 初始化地图级别
              center: mylatlot, // 初始化地图中心点位置
            });
            this.map.on('complete', () => { //地图加载完毕函数
              this.marker = new this.AMap.Marker({ //创建点标点
                position: mylatlot,
              });
              this.map.add(this.marker);    //添加点标点
            });
          })
          .catch((e) => {
            console.log(e);
          });


      })
    }
  }
}
</script>

<style lang="less" scoped>
.mapStyle {
  height: 65vh;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 90%;
  }
}
</style>